<template>
	<view class="adopt">
		<view class="type">
			<view class="typeLabel">类型</view>
			<radio-group v-model="dataForm.type" @change="changeType">
				<label class="radio">
					<radio checked :value="0"></radio>认养方案1:只获取种鸽所产的鸽子和鸽蛋
				</label>
				<label class="radio">
					<radio :value="1"></radio>认养方案2:认养结束后每个鸽笼将获得两只种鸽
				</label>
			</radio-group>
		</view>
		<view class="cageNumber">
			<view class="cageNumberLabel">鸽笼数量</view>
			<uni-number-box v-model="dataForm.cageNumber" :min="1" @change="updateTotalPrice"></uni-number-box>
		</view>
		<view class="adoptionTime">
			<view class="adoptionTimeLabel">认养时长</view>
			<radio-group class="adoptionTimeRadio" @change="changeAdoptionTime">
				<view v-for="(item,index) in adoptionTimeOptions" :key="item.adoptionTimeId" class="radio">
					<label class="radio">
						<radio :checked="index == 0" :value="index"></radio>{{item.adoptionTime}}
					</label>
				</view>
			</radio-group>
			<!-- 消除浮动对父节点的高度 -->
			<view style="clear:both;"></view>
		</view>
		<view class="totalPrice">
			<view class="totalPriceLabel">总价</view>
			<view class="totalPriceValue">￥{{dataForm.totalPrice}}</view>
			<!-- 消除浮动对父节点的高度 -->
			<view style="clear:both;"></view>
		</view>
		<view class="message">
			<view class="messageLabel">留言</view>
			<textarea maxlength="140" class="textarea" v-model="dataForm.message"></textarea>
		</view>
		<button class="adopteBtn" @click="addOrder">立即认养</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adoptionTimeOptionListShow: false,
				//选择列表
				adoptionTimeOptions: [],
				//用户选择的
				adoptionTimeOption: {},
				dataForm: {
					cageNumber: 1,
					adoptionTimeId: 0,
					totalPrice: 0,
					message: '',
					type: 0
				},
			}
		},
		onShow() {
			this.getAdoptionTimeOptions();
		},
		methods: {
			//修改认养类型
			changeType(event) {
				this.dataForm.type = event.detail.value;
				this.updateTotalPrice();
			},
			// 获取认养时长选项列表
			async getAdoptionTimeOptions() {
				const res = await this.$myRequest({
					url: 'order/adoptiontime/getAdoptionTimeList'
				})
				if (res && res.code === 0) {
					this.adoptionTimeOptions = res.data
					this.adoptionTimeOption = this.adoptionTimeOptions[0];
					this.dataForm.totalPrice = this.dataForm.cageNumber * this.adoptionTimeOption.price
					this.dataForm.adoptionTimeId = this.adoptionTimeOption.adoptionTimeId
				}
			},
			//修改价格
			updateTotalPrice(data) {
				if (data) {
					this.dataForm.cageNumber = data;
				}
				this.dataForm.totalPrice = this.dataForm.cageNumber * (this.adoptionTimeOption.price + (this.dataForm
					.type == 1 ? 130 : 0));
			},
			//修改认养时长
			changeAdoptionTime(option) {
				const index = option.detail.value;
				this.adoptionTimeOption = this.adoptionTimeOptions[index];
				this.updateTotalPrice()
			},
			async addOrder() {
				if (!uni.getStorageSync('TOKEN')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
				} else {
					const res = await this.$myRequest({
						url: 'order/applet/adopt',
						method: 'POST',
						data: this.dataForm
					})
					if (res && res.code === 0) {
						uni.showModal({
							title: '订单提交成功',
							cancelText: '晚点支付',
							confirmText: '立即支付',
							showCancel: true,
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/order/order'
									})
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.adopt {
		width: 700rpx;
		margin: 20rpx 25rpx 0 25rpx;
	}

	.type {
		border-bottom: 1rpx solid #F8F8F8;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

		.typeLabel {
			font-size: 45rpx;
		}

		label {
			display: block;
		}
	}

	.cageNumber {
		display: flex;
		padding-bottom: 20rpx;
		border-bottom: 1rpx #F8F8F8 solid;

		.cageNumberLabel {
			width: 400rpx;
			font-size: 45rpx;
		}


	}

	.adoptionTime {
		margin: 20rpx 0 0 0;
		border-bottom: 1rpx solid #F8F8F8;

		.adoptionTimeLabel {
			font-size: 45rpx;
		}

		.radio {
			margin: 10rpx;
			float: left;
			width: 200rpx;
			font-size: 35rpx;
		}

	}

	.totalPrice {
		display: flex;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: #F8F8F8 1rpx solid;

		.totalPriceLabel {
			width: 400rpx;
			font-size: 18px;
		}

		.totalPriceValue {
			color: red
		}
	}

	.message {
		margin-top: 20rpx;

		.textarea {
			margin-top: 10rpx;
			border: 1rpx gainsboro solid;
			border-radius: 10px;
			padding: 5rpx;
		}
	}

	.adopteBtn {
		background-color: #FFB300;
		bottom: 10rpx;
		width: 500rpx;
		margin: 20rpx 125rpx 0 125rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: white;
	}
</style>
